<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>会员注册</title>
<!--#include("../common/common-link.html"){}-->
<style type="text/css">
	* {
	  margin: 0;
	  padding: 0;
	}
	html{height: 100%;width: 100%;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
	body {background: #efefef none repeat scroll 0 0;line-height: 1.6;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;height: 100%; margin: 0 auto;}
	.wrap {padding:20px 10px;margin: 0 auto;max-width: 640px;min-width: 320px;}
	.wrap .panel{padding:10px;background-color: #fff;}
	.wrap .panel .title{width: 100%;text-align: center;border-bottom: 1px solid #ddd;padding-bottom: 8px;font-size: 20px;color: #919191}
	.wrap .panel .form-div{margin-top: 20px;}
	.wrap .panel .form-div .number{width: 100%;}
	.wrap .panel .form-div .number.wx{border-color: #4cae4c;}
	.wrap .panel .form-div .number.ali{border-color: #00AAEF;}
	.wrap .panel .form-div .number:focus{outline: none;}
	.wrap .panel .btns{text-align: center;width: 90%;margin: 0 auto;}
	.wrap .panel .btns .submit-btn{margin-top:20px;color: #fff;width: 100%;font-size: 16px;height: 39px;line-height: 25px;}
	.wrap .panel .btns .submit-btn.wx{background-color: #5cb85c; border-color: #4cae4c;}
	.wrap .panel .btns .submit-btn.ali{background-color: #108ee9; border-color: #00AAEF;}
	.wrap .panel .app-download{width: 90%;margin: 0 auto;text-align: right;    padding-top: 9px;}
	.wrap .panel .app-download a{width: 100%;}
</style>
</head>
<body>
	<div class="wrap" style="display: none">
		<div class="panel">
			<div class="guide">
				<div class="title text-muted">会员注册</div>
				<div class="form-div">
					<div class="form-group">
						<input type="number" :class="'form-control number '+browser" id="phone" placeholder="请输入手机号" :value="phone" v-model="phone">
					</div>
				</div>
				<div class="btns">
					<a href="javascript:;" :class="'btn submit-btn '+browser" @click="submit">立即注册</a>
				</div>
				<div class="app-download">
					<a :href="downloadUrl" target="_blank">下载app，注册会员</a>
				</div>
			</div>
			<div class="result" style="display:none">
				注册成功，默认初始登录密码为：<label>000000</label></br>
				<a :href="downloadUrl" target="_blank">下载app，轻松购物</a>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var pageData = {};
		var form={};
		function initVue() {
			new Vue({
				el : ".wrap",
				data : pageData
			});
			Vue.nextTick(function() {
				$(".wrap").show();
			});
		};
		function submit(){
			if(!checkPhone()){
				return;
			}
			$.ajax({
				url:"register",
				type:'POST',
				data:form,
				contentType:"application/x-www-form-urlencoded;charset=UTF-8",
				dataType:"json",
				success:function(result){
					closeLoading();
					var status=result.status;
					var code=result.code;
					var errorMsg=result.errorMsg;
					if(status=='success'){
						$(".guide").hide();
						$(".result").show();
						return ;
					}else{
						toast(errorMsg);
					}
				},
				error:function(){
					closeLoading();
					toast("系统错误，请稍后重试！");
				}
			});
		};
		function checkPhone(){
			var reg = /^(((13[0-9]{1})|(15[0-9]{1})||(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
			if(!reg.test(pageData.phone)){ 
				toast('请输入有效的手机号码！'); 
			    return false; 
			} 
			form.phone=pageData.phone;
			return true;
		};
		function checkBrowser(){
			var ua=window.navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i)=='micromessenger') {
				pageData.browser="wx";
			} else if(ua.match(/MicroMessenger/i)=='alipayclient'){
				pageData.browser="ali";
			}
		};
		function toast(txt){
			layer.open({
			    content:txt
			    ,skin:'msg'
			    ,time:2 
			  });
		};
		function loading(){
			layer.open({
			    type: 2
			    ,content: '处理中'
			  });
		};
		function closeLoading(){
			layer.closeAll()
		};
		function initData(){
			pageData.phone="";
			pageData.browser="wx";
			pageData.downloadUrl="https://www.baidu.com";
		};
		function initialize(){
			checkBrowser();
			initData();
			initVue();
		};
		initialize();
	</script>
</body>
</html>